<template>
  <div class="newsCenter" >
    <div v-if="noData">

    <div class="newsheader flexs">
      <div class="ico1">
        <span class="allSelect" @click.stop="choiseAll" v-if="selectAll">全选</span>
        <a v-else><span class="iconfont icon-left1 back" id="back" @click.stop="naviBack" ></span></a>
      </div>
      <p class="headerText">选择项目</p>
      <div class="ico2">
        <span class="cancel " @click.stop="cancel" v-if="selectAll" >取消</span>
        <span class="editor iconfont icon-bianji" @click.stop="modify" v-else></span>
      </div>
    </div>
    <div class="newscenterWrap">
      <div class="weui-cells weui-cells_checkbox" v-for="(item,index) in newsItem">
        <label class="weui-cell weui-check__label" :for='`s${index}`'>
          <div class="weui-cell__hd"  v-if="checked">
            <input type="checkbox"
                   class="weui-check" name="checkbox1"
                   :id='`s${index}`'
                   @change="changeStatus(index)" :checked=item.checked >
            <i class="weui-icon-checked"></i>
          </div>
          <div class="weui-cell__bd">
            <div class="flexs">
              <span class="dots"></span>
              <p class="systemNews">{{item.systemNews}}</p>
              <span class="date">{{item.date}}</span>
            </div>
            <p>
             {{item.info}}
            </p>
          </div>
        </label>
      </div>
    </div>
    <div class="delete" @click.stop="deleteItem">
      删除
    </div>
  </div>
    <div v-else class="noData">
      <div class="newsheader flexs">
        <div class="ico1">
          <a><span class="iconfont icon-left1 back"  @click.stop="naviBack" ></span></a>
        </div>
        <p class="headerText">消息中心</p>
      </div>
      <p>
      <span>暂无数据</span>
      </p>
    </div>
  </div>
</template>
<script>
  export default({
    data (){
      return {
        random:1,
        objectAssign:[],
        selectAll:false,
        checked:false,
        noData:false,
        newsItem:[
          {
            systemNews:'系统消息1',
            date:'9月19日',
            info:' 尊敬的用户您好！感谢您对XXXXX的支持，你的密码现已修改完毕，之后登陆需输入修改后的密码。',
          },
          {
            systemNews:'系统消息2',
            date:'9月19日',
            info:' 尊敬的用户您好！感谢您对XXXXX的支持，你的密码现已修改完毕，之后登陆需输入修改后的密码。',
          },
          {
            systemNews:'系统消息3',
            date:'9月19日',
            info:' 尊敬的用户您好！感谢您对XXXXX的支持，你的密码现已修改完毕，之后登陆需输入修改后的密码。',
          },
          {
            systemNews:'系统消息4',
            date:'9月19日',
            info:' 尊敬的用户您好！感谢您对XXXXX的支持，你的密码现已修改完毕，之后登陆需输入修改后的密码。',
          },
          {
            systemNews:'系统消息5',
            date:'9月19日',
            info:' 尊敬的用户您好！感谢您对XXXXX的支持，你的密码现已修改完毕，之后登陆需输入修改后的密码。',
          },
          {
            systemNews:'系统消息6',
            date:'9月19日',
            info:' 尊敬的用户您好！感谢您对XXXXX的支持，你的密码现已修改完毕，之后登陆需输入修改后的密码。',
          }
        ],
        obj:null
      }
    },
    components:{
    },
    methods:{
      changeStatus(i){
          this.newsItem[i].checked  = !this.newsItem[i].checked
      },
      naviBack(){
        this.$router.go(-1)
      },
      modify (){
        this.checked =true
        this.selectAll =true
      },
      choiseAll(){
        for(let i in this.newsItem){
          this.newsItem[i].checked =true
        }
        this.obj =Object.assign({},this.newsItem)
        this.newsItem =Object.keys(this.obj).map((key) =>this.obj[key])
        return this.newsItem
      },
      cancel (){
        this.selectAll =false
        this.checked =false
//        console.log(this.newsItem)
        for(let i in this.newsItem){
          this.newsItem[i].checked =false
        }
      },
      deleteItem (){
        let that = this
        var arr1 =[]
          for(let i in this.newsItem){
              if(this.newsItem[i].checked){
                arr1.push(i)
              }
          }
        arr1 =arr1.map(function (value,index) {
          return value-index
        })
        arr1.forEach(function (index) {
            that.newsItem.splice(index,1)
        })
      }
    },
    mounted(){
      this.newsItem.map((item)=>{
            item.checked =false
        })
    }
  })
</script>
<style scoped="">
  .newsCenter{
    background: #fff;
  }

  .flexs{
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
  }
  .flex1{
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    min-width: 0;
  }
 .newsheader{
    padding: 0 0.32rem;
    height: 0.8rem;
    line-height: 0.8rem;
    justify-content: space-around;
    background: #e83329;
  }
  .newsheader span{
    color: white;
  }

 .newsheader .headerText{
    font-size: 0.32rem;
    color: white;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    min-width: 0;
    text-align: center;
  }

  .newsheader .iconfont{
    font-size :0.36rem;
    color:white;
    width: 0.5rem;
  }
  .newscenterWrap {
    position: absolute;
    top: 0.8rem;
    bottom: 0.8rem;
    background: #f6f6f6;
    overflow: scroll;
    width: 100%;
  }
  .delete {
    position: fixed;
    left: 0;
    right: 0;
    max-width: 750px;
    bottom: 0;
    width: 100%;
    height: 0.8rem;
    background: #e83329;
    line-height: 0.8rem;
    font-size: 0.32rem;
    color: white;
    text-align: center;
    z-index: 999;
    margin: 0 auto;
  }
  .newscenterWrap{
    position: absolute;
    top:0.8rem;
    bottom: 0.8rem;
    background: #f6f6f6;
    overflow: scroll;
    width: 100%;
  }
  .choiseItem{
    background: white;
  }
  .weui-cell__bd .flexs{
    height: 0.4rem;
    line-height: 0.4rem;
  }
  .flexs .dots{
    width: 0.24rem;
    height: 0.24rem;
    background: #fe6e67;
    border-radius:50% ;
    margin-right: 0.3rem;
  }
  .flexs .systemNews{
    font-size: 0.3rem;
    color: #4d4c4c;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1

  }
  .weui-cell{
    padding: 10px 0.32rem;
  }
  .flexs .date{
    font-size: 0.24rem;

  }
  .weui-cell__bd>p{
    font-size:0.28rem ;
    color: #b0afaf;
    line-height: 1.3;
    padding: 0.1rem 0;
    text-align: justify;
  }
  .weui-cells_checkbox .weui-check:checked+.weui-icon-checked:before{
    color: #e83329;
  }
  .weui-cells{
    margin-bottom: 0.15rem;
    margin-top: 0;
  }
  .newscenterWrapItem{
    margin-top: 0.36rem;
  }
  .weui-cells_checkbox .weui-cell__bd{
    width: 100%;
  }
  .noData>p{
    position: absolute;
    left: 0;
    top:0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 100%;
    height: 40px;
    line-height: 40px;
    text-align: center;

  }
  .noData p span{
    position: relative;
    z-index: 1;
  }
  .noData p span:after{
    position: absolute;
    content: '';
    left:-3rem;
    top:50%;
    width: 2.5rem;
    height: 1px;
    background: #ccc;
    z-index: -1;
  }
  .noData p span:before{
    position: absolute;
    content: '';
    right:-3rem;
    top:50%;
    width: 2.5rem;
    height: 1px;
    z-index: -1;
    background: #ccc;
  }

</style>
